<template>
  <view class="container">
    <view class="fixed">
			<wd-drop-menu>
        <!-- <wd-drop-menu-item
					v-model="wasteType"
					:options="wasteOption"
					@change="reGetList"
				/> -->
        <wd-drop-menu-item
					v-model="status"
					:options="statusOption"
					title="啥也不是"
					@change="reGetList"
				/>
        <wd-drop-menu-item
					v-model="test"
					:options="testOption"
					title="测试popup数据上下滚动"
					@change="reGetList"
				/>
      </wd-drop-menu>
    </view>
    <view class='p-2'>
      测试 数据不多 不滚动没问题 当数据多了 拉到底也没问题  下拉就有问题了 与 onPullDownRefresh 事件冲突
    </view>
    
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';

const wasteType = ref('DANGER')
const wasteOption = ref([
	{ label: '危险废物', value: 'DANGER' },
	{ label: '一般固废', value: 'NORMAL' },
])

const status = ref('all')
const statusOption = ref([
	{ label: '全部', value: 'all' },
	{ label: '未确认', value: 'NO' },
	{ label: '已确认', value: 'YES' },
])
const test = ref('all')
const testOption = ref([
	{ label: '全部', value: 'all' },
	{ label: '测试一', value: '测试一' },
  { label: '测试二', value: '测试二' },
  { label: '测试三', value: '测试三' },
  { label: '测试四', value: '测试四' },
  { label: '测试五', value: '测试五' },
  { label: '测试六', value: '测试六' },
  { label: '测试七', value: '测试七' },
  { label: '测试八', value: '测试八' },
  { label: '测试九', value: '测试九' },
  { label: '测试10', value: '测试10' },
  { label: '测试11', value: '测试11' },
  { label: '测试12', value: '测试12' },
  { label: '测试13', value: '测试13' },
  { label: '测试14', value: '测试14' },
  { label: '测试15', value: '测试15' },
  { label: '测试16', value: '测试16' },
])
const reGetList = ()=> {
  console.log('getList')
}
onPullDownRefresh(() => {
  setTimeout(() => {
    //结束下拉刷新
    uni.stopPullDownRefresh();
  }, 1000);
});



</script>

<style scoped>
.list-item {
  position: relative;
  display: flex;
  padding: 10px 15px;
  background: #fff;
  color: #464646;
}

.list-item:after {
  position: absolute;
  display: block;
  content: '';
  height: 1px;
  left: 0;
  width: 100%;
  bottom: 0;
  background: #eee;
  transform: scaleY(0.5);
}
image {
  display: block;
  width: 120px;
  height: 78px;
  margin-right: 15px;
}
.right {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
</style>
